<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Carbon - Admin Template</title>
    <link rel="stylesheet" href="/static/admin/vendor/simple-line-icons/css/simple-line-icons.css">
    <link rel="stylesheet" href="/static/admin/vendor/font-awesome/css/fontawesome-all.min.css">
    <link rel="stylesheet" href="/static/admin/css/styles.css">
</head>
<body class="sidebar-fixed header-fixed">
<div class="page-wrapper" id="body">
    <div class="page-header">
        <nav class="navbar page-header">
            <a href="#" class="btn btn-link sidebar-mobile-toggle d-md-none mr-auto">
                <i class="fa fa-bars"></i>
            </a>

            <a class="navbar-brand" href="#">
                <img src="/static/admin/imgs/logo.png" alt="logo">
            </a>

            <a href="#" class="btn btn-link sidebar-toggle d-md-down-none">
                <i class="fa fa-bars"></i>
            </a>

            <ul class="navbar-nav ml-auto">
                <li class="nav-item d-md-down-none">
                    <a href="#">
                        <i class="fa fa-bell"></i>
                        <span class="badge badge-pill badge-danger">5</span>
                    </a>
                </li>

                <li class="nav-item d-md-down-none">
                    <a href="#">
                        <i class="fa fa-envelope-open"></i>
                        <span class="badge badge-pill badge-danger">5</span>
                    </a>
                </li>

                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown"
                       aria-haspopup="true" aria-expanded="false">
                        <img src="/static/admin/imgs/avatar-1.png" class="avatar avatar-sm" alt="logo">
                        <span class="small ml-1 d-md-down-none">John Smith</span>
                    </a>

                    <div class="dropdown-menu dropdown-menu-right">
                        <div class="dropdown-header">Account</div>

                        <a href="#" class="dropdown-item">
                            <i class="fa fa-user"></i> Profile
                        </a>

                        <a href="#" class="dropdown-item">
                            <i class="fa fa-envelope"></i> Messages
                        </a>

                        <div class="dropdown-header">Settings</div>

                        <a href="#" class="dropdown-item">
                            <i class="fa fa-bell"></i> Notifications
                        </a>

                        <a href="#" class="dropdown-item">
                            <i class="fa fa-wrench"></i> Settings
                        </a>

                        <a href="#" class="dropdown-item">
                            <i class="fa fa-lock"></i> Logout
                        </a>
                    </div>
                </li>
            </ul>
        </nav>
    </div>

    <div class="main-container">
        <div class="sidebar">
            <nav class="sidebar-nav">
                <ul class="nav">
                    <li class="nav-title">Navigation</li>

                    <li class="nav-item">
                        <a href="index.html" class="nav-link">
                            <i class="icon icon-speedometer"></i> Dashboard
                        </a>
                    </li>

                    <li class="nav-item nav-dropdown">
                        <a href="#" class="nav-link nav-dropdown-toggle">
                            <i class="icon icon-target"></i> Layouts <i class="fa fa-caret-left"></i>
                        </a>

                        <ul class="nav-dropdown-items">
                            <li class="nav-item">
                                <a href="layouts-normal.html" class="nav-link">
                                    <i class="icon icon-target"></i> Normal
                                </a>
                            </li>

                            <li class="nav-item">
                                <a href="layouts-fixed-sidebar.html" class="nav-link">
                                    <i class="icon icon-target"></i> Fixed Sidebar
                                </a>
                            </li>

                            <li class="nav-item">
                                <a href="layouts-fixed-header.html" class="nav-link">
                                    <i class="icon icon-target"></i> Fixed Header
                                </a>
                            </li>

                            <li class="nav-item">
                                <a href="layouts-hidden-sidebar.html" class="nav-link">
                                    <i class="icon icon-target"></i> Hidden Sidebar
                                </a>
                            </li>
                        </ul>
                    </li>

                    <li class="nav-item nav-dropdown">
                        <a href="#" class="nav-link nav-dropdown-toggle">
                            <i class="icon icon-energy"></i> UI Kits <i class="fa fa-caret-left"></i>
                        </a>

                        <ul class="nav-dropdown-items">
                            <li class="nav-item">
                                <a href="alerts.html" class="nav-link">
                                    <i class="icon icon-energy"></i> Alerts
                                </a>
                            </li>

                            <li class="nav-item">
                                <a href="buttons.html" class="nav-link">
                                    <i class="icon icon-energy"></i> Buttons
                                </a>
                            </li>

                            <li class="nav-item">
                                <a href="cards.html" class="nav-link">
                                    <i class="icon icon-energy"></i> Cards
                                </a>
                            </li>

                            <li class="nav-item">
                                <a href="modals.html" class="nav-link">
                                    <i class="icon icon-energy"></i> Modals
                                </a>
                            </li>

                            <li class="nav-item">
                                <a href="tabs.html" class="nav-link">
                                    <i class="icon icon-energy"></i> Tabs
                                </a>
                            </li>

                            <li class="nav-item">
                                <a href="progress-bars.html" class="nav-link">
                                    <i class="icon icon-energy"></i> Progress Bars
                                </a>
                            </li>

                            <li class="nav-item">
                                <a href="widgets.html" class="nav-link">
                                    <i class="icon icon-energy"></i> Widgets
                                </a>
                            </li>
                        </ul>
                    </li>

                    <li class="nav-item nav-dropdown">
                        <a href="#" class="nav-link nav-dropdown-toggle">
                            <i class="icon icon-graph"></i> Charts <i class="fa fa-caret-left"></i>
                        </a>

                        <ul class="nav-dropdown-items">
                            <li class="nav-item">
                                <a href="chartjs.html" class="nav-link">
                                    <i class="icon icon-graph"></i> Chart.js
                                </a>
                            </li>
                        </ul>
                    </li>

                    <li class="nav-item">
                        <a href="UploadImage.html" class="nav-link active">
                            <i class="icon icon-puzzle"></i> Forms
                        </a>
                    </li>

                    <li class="nav-item">
                        <a href="tables.html" class="nav-link">
                            <i class="icon icon-grid"></i> Tables
                        </a>
                    </li>

                    <li class="nav-title">More</li>

                    <li class="nav-item nav-dropdown">
                        <a href="#" class="nav-link nav-dropdown-toggle">
                            <i class="icon icon-umbrella"></i> Pages <i class="fa fa-caret-left"></i>
                        </a>

                        <ul class="nav-dropdown-items">
                            <li class="nav-item">
                                <a href="blank.html" class="nav-link">
                                    <i class="icon icon-umbrella"></i> Blank Page
                                </a>
                            </li>

                            <li class="nav-item">
                                <a href="login.html" class="nav-link">
                                    <i class="icon icon-umbrella"></i> Login
                                </a>
                            </li>

                            <li class="nav-item">
                                <a href="register.html" class="nav-link">
                                    <i class="icon icon-umbrella"></i> Register
                                </a>
                            </li>

                            <li class="nav-item">
                                <a href="invoice.html" class="nav-link">
                                    <i class="icon icon-umbrella"></i> Invoice
                                </a>
                            </li>

                            <li class="nav-item">
                                <a href="404.html" class="nav-link">
                                    <i class="icon icon-umbrella"></i> 404
                                </a>
                            </li>

                            <li class="nav-item">
                                <a href="500.html" class="nav-link">
                                    <i class="icon icon-umbrella"></i> 500
                                </a>
                            </li>

                            <li class="nav-item">
                                <a href="settings.html" class="nav-link">
                                    <i class="icon icon-umbrella"></i> Settings
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </div>

        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header bg-light">
                                上传壁纸（Google play上架的壁纸APP）
                            </div>

                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="normal-input"
                                                   class="form-control-label">焦距</label>
                                            <input class="form-control" v-model="FocalLength">
                                        </div>
                                        <div class="form-group">
                                            <label for="normal-input"
                                                   class="form-control-label">光圈</label>
                                            <input class="form-control" v-model="aperture">
                                        </div>
                                        <div class="form-group">
                                            <label for="normal-input"
                                                   class="form-control-label">作者</label>
                                            <input class="form-control" v-model="author">
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="normal-input"
                                                   class="form-control-label">相机</label>
                                            <input class="form-control" v-model="camera">
                                        </div>
                                        <div class="form-group">
                                            <label for="normal-input"
                                                   class="form-control-label">格式</label>
                                            <input class="form-control" v-model="format">
                                        </div>
                                        <div class="form-group">
                                            <label for="normal-input"
                                                   class="form-control-label">iso</label>
                                            <input class="form-control" v-model="iso">
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="normal-input"
                                                   class="form-control-label">尺寸</label>
                                            <input class="form-control" v-model="size">
                                        </div>
                                        <div class="form-group">
                                            <label for="normal-input"
                                                   class="form-control-label">标签</label>
                                            <input class="form-control" v-model="tags">
                                        </div>
                                        <div class="form-group">
                                            <label for="normal-input"
                                                   class="form-control-label">拍摄时间</label>
                                            <input class="form-control" v-model="time">
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="normal-input"
                                                   class="form-control-label">来源</label>
                                            <input class="form-control" v-model="from_web">
                                        </div>
                                        <div class="form-group">
                                            <label for="normal-input"
                                                   class="form-control-label">上传时间</label>
                                            <input class="form-control" v-model="uploadTime" type="date">
                                        </div>
                                        <div class="form-group">
                                            <label for="normal-input"
                                                   class="form-control-label">颜色</label>
                                            <input class="form-control" v-model="color">
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="normal-input"
                                                   class="form-control-label">地址</label>
                                            <input class="form-control" v-model="address">
                                        </div>
                                        <div class="form-group">
                                            <label for="normal-input"
                                                   class="form-control-label">状态</label>
                                            <input class="form-control" v-model="status">
                                        </div>
                                        <div class="form-group">
                                            <label for="normal-input"
                                                   class="form-control-label">更新批次</label>
                                            <input class="form-control" v-model="updateBatch">
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="normal-input"
                                                   class="form-control-label">壁纸信息</label>
                                            <input class="form-control" v-model="info">
                                        </div>
                                        <div class="form-group">
                                            <label for="normal-input"
                                                   class="form-control-label">壁纸标题</label>
                                            <input class="form-control" v-model="title">
                                        </div>
                                        <div class="form-group">
                                            <label for="normal-input"
                                                   class="form-control-label">目录</label>
                                            {#                                            <input class="form-control"#}
                                            {#                                                   v-model="catalogue">#}
                                            <select class="form-control" v-model="catalogue">
                                                <option value="scenery">scenery</option>
                                                <option value="animal">animal</option>
                                                <option value="people">people</option>
                                                <option value="art">art</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="normal-input"
                                                   class="form-control-label">文件</label>
                                            <input id="file"
                                                   class="form-control"
                                                   type="file">
                                        </div>

                                        <div class="form-group">
                                            <button @click="doUpload">提交</button>
                                        </div>
                                    </div>

                                </div>

                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<script src="/static/admin/vendor/jquery/jquery.min.js"></script>
<script src="/static/admin/vendor/popper.js/popper.min.js"></script>
<script src="/static/admin/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/admin/vendor/chart.js/chart.min.js"></script>
<script src="/static/admin/js/carbon.js"></script>
<script src="/static/admin/js/demo.js"></script>
<script src="/static/admin/js/vue.js"></script>
<script src="/static/admin/js/axios.min.js"></script>
<script>
    new Vue({
        el: '#body',
        data: {
            FocalLength: "N/A",
            aperture: "N/A",
            author: "N/A",
            camera: "N/A",
            downloads: 0,
            format: "N/A",
            iso: "N/A",
            likes: 0,
            size: "N/A",
            tags: "N/A",
            time: "N/A",
            views: 0,
            from_web: "N/A",
            uploadTime: "N/A",
            color: "N/A",
            address: "N/A",
            status: "N/A",
            updateBatch: "N/A",
            info: "N/A",
            title: "N/A",
            file: "N/A",
            catalogue: "N/A"
        },
        methods: {
            doUpload: function () {
                let formData = new FormData()
                formData.append("FocalLength", this.FocalLength)
                formData.append("aperture", this.aperture)
                formData.append("author", this.author)
                formData.append("camera", this.camera)
                formData.append("downloads", this.downloads)
                formData.append("format", this.format)
                formData.append("iso", this.iso)
                formData.append("likes", this.likes)
                formData.append("size", this.size)
                formData.append("tags", this.tags)
                formData.append("time", this.time)
                formData.append("views", this.views)
                formData.append("from_web", this.from_web)
                formData.append("uploadTime", this.uploadTime)
                formData.append("color", this.color)
                formData.append("address", this.address)
                formData.append("status", this.status)
                formData.append("updateBatch", this.updateBatch)
                formData.append("info", this.info)
                formData.append("title", this.title)
                formData.append("catalogue", this.catalogue)

                let fileDom = document.getElementById("file")
                formData.append("file", fileDom.files[0])

                axios.post("/appBackend/api/WallPaper/", formData).then(res => {
                    console.log(res)
                    if (res.status === 201) {
                        alert("新增完成")
                    }
                })
            }
        }
    })
</script>
</body>
</html>
